<template>
  <div>
    <ux-grid ref="singleTable" v-if="reLoadFlg" :data="prposTabelData" style="width: 100%" border :header-cell-style="{
      color: 'rgba(0, 0, 0, 0.85)',
      fontSize: '14px',
      textAlign: 'left',
      fontWeight: 'bold',
      padding: 0,
      height: '32px',
      background: 'rgb(255,242,204)'
    }" :row-style="{
      color: 'rgba(96,98,102,1)',
      fontSize: '13px',
      textAlign: 'left',
      padding: 0,
      height: '32px',
    }" :cell-style="cellStyle" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight"
      v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
      :element-loading-text="$t('message.bhView.loading')">
      <template slot="empty"> {{ empty }} </template>

      <!-- <ux-table-column :title="tabelDataConfig.title" :resizable="false" v-if="tabelDataConfig.isShow"
        :width="tabelDataConfig.width"  :fixed="tabelDataConfig.isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p style="text-align: center">
            {{ scope.row }}
          </p>
        </template>
      </ux-table-column> -->

      <ux-table-column :title="LAB[0]" :resizable="false" :width="tabelDataConfig[0].width"
        v-if="tabelDataConfig[0].isShow" :fixed="tabelDataConfig[0].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'left' : scope.row.flg.value == 'Insp' ? 'left' : scope.row.flg.value == 'Thick' ? 'left' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.w_name }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column :title="LAB[1]" :resizable="false" :width="tabelDataConfig[1].width"
        v-if="tabelDataConfig[1].isShow" :fixed="tabelDataConfig[1].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'center' : scope.row.flg.value == 'Insp' ? 'right' : scope.row.flg.value == 'Thick' ? 'right' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.cod_symb }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column :title="LAB[2]" :resizable="false" :width="tabelDataConfig[2].width"
        v-if="tabelDataConfig[2].isShow" :fixed="tabelDataConfig[2].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'center' : scope.row.flg.value == 'Insp' ? 'left' : scope.row.flg.value == 'Thick' ? 'left' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.lvl }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column :title="LAB[3]" :resizable="false" :width="tabelDataConfig[3].width"
        v-if="tabelDataConfig[3].isShow" :fixed="tabelDataConfig[3].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'left' : scope.row.flg.value == 'Insp' ? 'left' : scope.row.flg.value == 'Thick' ? 'right' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.c_name }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column :title="LAB[4]" :resizable="false" :width="tabelDataConfig[4].width"
        v-if="tabelDataConfig[4].isShow" :fixed="tabelDataConfig[4].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'left' : scope.row.flg.value == 'Insp' ? 'left' : scope.row.flg.value == 'Thick' ? 'left' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.i_name }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column :title="LAB[5]" :resizable="false" :width="tabelDataConfig[5].width"
        v-if="tabelDataConfig[5].isShow" :fixed="tabelDataConfig[5].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'left' : scope.row.flg.value == 'Insp' ? 'left' : scope.row.flg.value == 'Thick' ? 'left' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.t_name }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column :title="LAB[6]" :resizable="false" :width="tabelDataConfig[6].width"
        v-if="tabelDataConfig[6].isShow" :fixed="tabelDataConfig[6].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'center' : scope.row.flg.value == 'Insp' ? 'left' : scope.row.flg.value == 'Thick' ? 'left' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.c7 }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column :title="LAB[7]" :resizable="false" :width="tabelDataConfig[7].width"
        v-if="tabelDataConfig[7].isShow" :fixed="tabelDataConfig[7].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'center' : scope.row.flg.value == 'Insp' ? 'center' : scope.row.flg.value == 'Thick' ? 'center' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.c8 }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column :title="LAB[8]" :resizable="false" :width="tabelDataConfig[8].width"
        v-if="tabelDataConfig[8].isShow" :fixed="tabelDataConfig[8].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'center' : scope.row.flg.value == 'Insp' ? 'center' : scope.row.flg.value == 'Thick' ? 'center' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.c9 }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column :title="LAB[9]" :resizable="false" :width="tabelDataConfig[9].width"
        v-if="tabelDataConfig[9].isShow" :fixed="tabelDataConfig[9].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'center' : scope.row.flg.value == 'Insp' ? 'center' : scope.row.flg.value == 'Thick' ? 'center' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.std_date }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column :title="LAB[10]" :resizable="false" :width="tabelDataConfig[10].width"
        v-if="tabelDataConfig[10].isShow" :fixed="tabelDataConfig[10].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'right' : scope.row.flg.value == 'Insp' ? 'right' : scope.row.flg.value == 'Thick' ? 'right' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.cyc }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column :title="LAB[11]" :resizable="false" :width="tabelDataConfig[11].width"
        v-if="tabelDataConfig[11].isShow" :fixed="tabelDataConfig[11].isFlex ? 'left' : ''" align="center">
        <template slot-scope="scope">
          <p :style="{
            'textAlign': scope.row.flg.value == 'Fortification' ? 'center' : scope.row.flg.value == 'Insp' ? 'center' : scope.row.flg.value == 'Thick' ? 'center' : '',
            'fontWeight': scope.row.flg.isTitle ? 'bold' : ''
          }">
            {{ scope.row.wrk_cts1 }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column v-for="(item, index) in prposTabelData[0].ymResModel" :key="index" :title="item.key"
        :resizable="false" :width="110" align="center">
        <template slot-scope="scope">
          <p style="text-align: center" :class="[scope.row.ymResModel[index]['value'] == '●'
            || scope.row.ymResModel[index]['value'] == '◎'
            || scope.row.ymResModel[index]['value'] == '○' ? 'tiemFlgS' : '']">
            {{ scope.row.ymResModel[index]['value'] }}
          </p>
        </template>
      </ux-table-column>

    </ux-grid>
  </div>
</template>

<script>
// import $ from 'jquery'
import eventBus from "@/eventBus/bus";
import { showLoading, hideLoading } from "@/utils/loading";
// 导出模块
export default {
  // 模块名字
  name: "MSDetailTabel",
  props: {
    tableHeight: Number,
    prposTabelData: Array,
    LAB: Array,
    loading: Boolean,
    tabelDataConfig: Array,
    empty: String,
    Month: Object,
    currentDiff: Number,
  },
  // 模块数据
  data() {
    //数据
    return {
      DateList: [],
      activeNum: 0,
      nextIndex: -1,
      
      reLoadFlg: true,

    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {
    prposTabelData: {
      immediate: true,
      handler(nData) {
        showLoading();
        this.reLoadFlg = false;
        console.log(nData, "NNNNNNNNNNNn")

        this.DateList = [];
        if (nData.length != 0) {
          // let nextIndex = this.nextIndex == -1 ? this.activeNum : this.nextIndex;
          // if (this.activeNum > nData.length - 1) {
          //   this.activeNum = nData.length - 1
          // }
          setTimeout(() => {
            this.$refs.singleTable.setCurrentRow(this.prposTabelData[0]);
            this.prposTabelData[0].ymResModel.forEach((item, index) => {
              if (item.key == this.Month.nowM || item.key == this.Month.nowY) {
                this.$refs.singleTable.pagingScrollTopLeft(0, (index - 3) * 110 + this.currentDiff);
              }
            })
          }, 200);

          // this.$refs.singleTable.setCurrentRow(this.prposTabelData[nextIndex]);
          // // this.currentRow = this.prposTabelData[this.activeNum];
          // this.$emit("getMSTabelRow", this.prposTabelData[nextIndex]);
          // if (nextIndex >= 9) {
          //   this.$refs.singleTable.pagingScrollTopLeft((nextIndex - 2) * 33);
          // }
          // eventBus.$emit("MSDType", 2)

          // setTimeout(() => {
          //   this.nextIndex = -1;
          // }, 50);

          // this.DateList = nData[0].dataJson;
          // let _this = this;
          // setTimeout(function () {
          //   _this.$refs.singleTable.doLayout(true);
          //   _this.$refs.singleTable.pagingScrollTopLeft(0, 0);
          //   _this.$emit("getMSTabelRow", _this.prposTabelData[0]);
          // });
          // this.setCurrentByR(nData[0].posNo);
          // this.$refs.singleTable.setCurrentRow(this.prposTabelData[0]);
          // this.currentRow = this.prposTabelData[0];
          // this.$emit("getMSTabelRow", this.prposTabelData[0]);
        } else {
          //列表为空-
          setTimeout(() => {
            eventBus.$emit("resetSaveForMSD")
            this.$emit("getMSTabelRow", 'listEmpty');
            console.log("111111111111111111")
          }, 300);
        }
        setTimeout(() => {
          hideLoading();
          this.reLoadFlg = true;
          
          this.$refs.singleTable.refreshColumn();
          this.$refs.singleTable.doLayout();
        }, 100)
      },
    },
  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    // 表格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let style = {
        color: "rgba(96,98,102,1)",
        fontSize: "14xpx",
        textAlign: "left",
        padding: 0,
        height: "32px"
      };
      if (row.flg.macFlg) {
        style.background = "rgb(242,242,242)"
      }
      if (row.flg.isTitle) {
        style.background = "rgb(255,242,204)"
      }
      if (row.flg.backGround == 1) {
        style.background = "rgb(220,220,250)"
      }
      // style.textAlign = "center"
      // if (columnIndex <= this.leftNum && row.IsChoose == 1) {
      //   style.background = "#DCDCFA";
      //   style.border = "0.5px solid rgb(233, 233, 233)";
      // }
      if (column.title == this.Month.nowM || column.title == this.Month.nowY) {
        style.background = 'rgba(206, 255, 255,1)';
        style.border = "0.1px solid rgb(233, 233, 233)";
        style.transform = 'translateY(-1px)'
      }
      return style;
    },
    setCurrentByR(r) {
      for (var i = 0; i < this.prposTabelData.length; i++) {
        if (this.prposTabelData[i].posNo == r) {
          this.$refs.singleTable.pagingScrollTopLeft(i * 32);
          this.$refs.singleTable.setCurrentRow(this.prposTabelData[i]);
          return;
        }
      }
    },
    handleCurrentChange(val) {
      console.log(val)
      //阻止点击后切换
      this.$store.state.threeFlg = val.actuNo;
      if (this.$store.state.isStop.flg) {
        // this.prposTabelData.forEach((i, v) => {
        //   if (i == val) {
        //     this.nextIndex = v;
        //   }
        // });
        this.$store.state.isStop.name = 'active';
        this.$store.state.isStop.next = 'goNextOfCenterTable';
        this.$refs.singleTable.setCurrentRow(this.prposTabelData[this.activeNum]);
        return
      }
      this.currentRow = val;
      this.$emit("getMSTabelRow", val);
      this.prposTabelData.forEach((i, v) => {
        if (i == val) {
          this.activeNum = v;
        }
      });
      console.log(this.activeNum)
      eventBus.$emit("MSDType", 2)
    },
    clickROW(row) {
      console.log(row);
    },
    load() { },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    // 设置选择第几行
    /**
     * 1.默认第一行，表格刷新第一行
     * 2.新增修改，传唯一值（POS_NO），设置当前行
     * 3.数据修改切换数据，提示是否保存。----实现思路，记录点击后的POS_NO，并不切换，等，需要切换时刷新即可
     */
    eventBus.$on("SET_F", (isInit) => {
      var Num = 0;
      if (isInit) {
        Num = this.$store.state.threeFlg;
      } else {
        Num = 0;
      }
      let V = 0;
      this.prposTabelData.forEach((i, v) => {
        if (i.actuNo == Num) {
          V = v;
        }
      });

      this.$refs.singleTable.setCurrentRow(this.prposTabelData[V]);
      this.currentRow = this.prposTabelData[V];
      this.$emit("getMSTabelRow", this.prposTabelData[V]);
      eventBus.$emit("MSDType", 2)
      this.currentRow = this.prposTabelData[V];
      if (V >= 9) {
        this.$refs.singleTable.pagingScrollTopLeft((V - 2) * 33);
      } else {
        this.$refs.singleTable.pagingScrollTopLeft(0);
      }
    })


    eventBus.$on("goNextOfCenterTable", (flg) => {

      if (this.nextIndex == -1) {
        return
      }
      this.$refs.singleTable.setCurrentRow(this.prposTabelData[this.nextIndex]);
      // this.currentRow = this.prposTabelData[this.activeNum];
      this.$emit("getMSTabelRow", this.prposTabelData[this.nextIndex]);
      if (this.nextIndex >= 9) {
        this.$refs.singleTable.pagingScrollTopLeft((this.nextIndex - 2) * 33);
      }
      setTimeout(() => {
        this.nextIndex = -1;
      }, 50);
    });

    eventBus.$on("resetTabelStyleForMSD", (setNum) => {
      setTimeout(() => {
        this.$refs.singleTable.doLayout(true);
      }, 300);
      if (setNum) {
        console.log(this.activeNum)
        setTimeout(() => {
          this.$refs.singleTable.setCurrentRow(this.prposTabelData[this.activeNum]);
          this.currentRow = this.prposTabelData[this.activeNum];
          this.$emit("getMSTabelRow", this.prposTabelData[this.activeNum]);
          if (this.activeNum >= 9) {
            this.$refs.singleTable.pagingScrollTopLeft((this.activeNum - 2) * 33);
          }
        }, 700);
      } else {
        this.$refs.singleTable.setCurrentRow(this.prposTabelData[0]);
        this.currentRow = this.prposTabelData[0];
        this.$emit("getMSTabelRow", this.prposTabelData[0]);
      }
    });


  },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() {
    eventBus.$off('SET_F');
    eventBus.$off('goNextOfCenterTable');
    eventBus.$off('resetTabelStyleForMSD');
  },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.right-text {
  width: 100%;
  height: 100%;
  text-align: right;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.sizeColor {
  color: rgb(22, 22, 255);
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
//   background-color: #e6f7ff;
// }

::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
  border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
  box-shadow: none;
}

::v-deep .el-table__body tr.current-row>td {
  background-color: rgb(233, 236, 237);
}

.tiemFlgS {
  font-size: 20px;
  font-family: "Menlo, Monaco, Courier New, monospace";
  line-height: 24px !important;
  text-align: center;
  height: 24px;
}
</style>
